<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绩效</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/delayTas.css">
</head>

<body>
    <div class="top-navigation">
        <img class="arrow" onclick="backIndex()" src="img/arrow.png" alt="图片加载中">
        <h3>逾期任务</h3>
        <img class="search" src="img/search.png" alt="图片加载中">
    </div>
    <!-- 搜索界面 -->
    <div class="fades" hidden></div>
    <div class="bottom-modal" hidden>
        <div class="modal-wrapper">
            <div class="modals-title">
                <p style="opacity: 0;"></p>
                <h3>条件搜索</h3>
                <h5 class="clearForm">清空</h5>
            </div>
            <form class="forms">
                <input name="search" type="text" placeholder="请输入搜索内容">
                <div class="input-container">
                    <div>
                        <h3> 开始时间</h3>
                        <input name="startDate" type="text" id="startDate" placeholder="请选择开始时间"
                            data-options="{'type':'YYYY-MM-DD','beginYear':2000,'endYear':2050}">
                    </div>
                    <div>
                        <h3>结束时间</h3>
                        <input name="startDate" type="text" id="endDate" placeholder="请选择结束时间"
                            data-options="{'type':'YYYY-MM-DD','beginYear':2000,'endYear':2050}">
                    </div>
                </div>
                <h3 class="state-font">状态</h3>
                <select class="state-select" name="state" id="" placeholder="点击选择">
                    <option value="">点击选择</option>
                    <option value="">正常</option>
                    <option value="">逾期</option>
                    <option value="">超前</option>
                    <option value="">未开始</option>
                    <option value="">进行中</option>
                </select>
            </form>
            <button id="search-btn">搜索</button>
        </div>
    </div>

    <div class="delay-content">
        <!-- <div class="delay-item">
            <h3>1</h3>
            <div>
                <div class="first-row">
                    <p class="title hidden-font">塘前绿色食品产业园（一….2</p>
                    <p class="delay-day">逾期1天</p>
                </div>
                <div class="second-row">
                    <p class="node hidden-font">15.2第三方编制</p>
                    <p class="date">逾期日期2018.08.21</p>
                </div>
            </div>
        </div> -->
    </div>
    <div id="load" style="display: none;">
        <div class="load-tip">
            <p></p>
            <h3>点击加载更多</h3>
            <p></p>
        </div>

    </div>


    <script src="js/flexible.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jquery.date.js"></script>
    <!-- VConsole手机调试 -->
    <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
    <script>
        // 手机调试
        // var vConsole = new VConsole();

        // 调用日期选择器
        $.date('#startDate');
        $.date('#endDate');

        // 显示模态框
        $(".top-navigation .search").click(function () {
            $(".bottom-modal").fadeIn();
            $(".fades").fadeIn();
        });

        // 关闭模态框
        $(".fades").click(function () {
            closeModal();
        });

        // 关闭模态框function
        function closeModal() {
            $(".bottom-modal").fadeOut();
            $(".fades").fadeOut();
        }
        // 重置form表单
        $(".clearForm").click(function () {
            $(".forms").find('input[type=text],select,input[type=hidden]').each(function () {
                $(this).val('');

            });

        });

        // 提交表单
        $("#search-btn").click(function () {
            var data = $(".forms").serialize();
            console.log(data);
            closeModal();
        });
    </script>

    <!-- 请求数据 -->
    <script>
        // 获取用户电话号码
        var userPhone = window.AndroidWebView.getUserId();

        var page = 1;
        var num = 0;

        function loadContent(page) {
            $.ajax({
                url: "http://120.78.158.120:8099/zhApp/earlyWarning/lists",
                type: "POST",
                dataType: "json", //返回数据形式为json
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    "page": page,
                    "userPhone": userPhone
                }),
                success: function (res) {
                    console.log(res);
                    if (res.code === "200" && res.data !== undefined) {
                        $("#load").css("display", "block");
                        var item = res.data.model;
                        var html = "";
                        for (var i = 0; i < item.length; i++) {
                            num++
                            html = '\
                            <div class="delay-item">\
                                <h3>' + num + '</h3>\
                                <div>\
                                    <div class="first-row">\
                                        <p class="title hidden-font">' + item[i].projectName + '</p>\
                                        <p class="delay-day">逾期' + item[i].number + '天</p>\
                                    </div>\
                                    <div class="second-row">\
                                        <p class="node hidden-font">' + item[i].nodeName + '</p>\
                                        <p class="date">逾期日期' + item[i].planBeginDate + '</p>\
                                    </div>\
                                </div>\
                            </div>\
                            ';
                            $(".delay-content").append(html);
                        }
                    }

                    if (res.data !== undefined) {

                        $(".load-tip h3").html("点击加载更多");
                    } else {
                        $(".load-tip h3").html("数据已加载完毕");
                    }
                }
            });
        }
        loadContent(page);

        $(function () {
            $(".load-tip").click(function () {
                page++
                console.log("page:" + page);
                $(".load-tip h3").html("数据正在加载中");
                loadContent(page);
            });


        })
        // 返回安卓首页
        function backIndex() {
            window.AndroidWebView.showInfoFromJs()
        }
    </script>
</body>

</html>